<template>
  <div id="app">
         <transition >
            <router-view/>
        </transition>

    <div class="foot">
      <div class="footFixed">
         <router-link to="/home">
        <div>
          <img :src="imghome" alt="">
          <div>会员 </div>
          </div>
      </router-link>
       <router-link to="/Sao">
        <div>
           <img :src="imgSao" alt="">
          <div> 扫码 </div>
        </div>
         </router-link>
         <router-link to="/My">
        <div>
           <img :src="imgMy" alt="">
          <div> 我的 </div>
        </div>
         </router-link>
        </div>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabItem } from "mint-ui";
export default {
  name: "App",
  data() {
    return {
      selected: 1,
      imghome: "",
      imgMy: "",
      imgSao: "",
        is:true,
    };
  },
  created() {
    this.Highlight();
    this.cehua();
  },
  mounted() {
    this.bot();
  },
  methods: {
    cehua: function() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        console.log(111111);
        this.is = true;
      } else if (isiOS) {
        this.is = false;
        console.log(222222);
      }
    },
    bot: function() {
      var newval = this.$route.path;

      if (newval == "/home" || newval == "/My" || newval == "/Sao") {
        document.querySelector(".foot").style.display = "block";
        if (newval == "/Sao" || newval == "/My") {
          document.getElementById("app").style.paddingBottom = "0rem";
        } else {
          document.getElementById("app").style.paddingBottom = "3rem";
        }
      } else {
        document.querySelector(".foot").style.display = "none"; //55
        document.getElementById("app").style.paddingBottom = "0rem";
      }
    },
    Highlight: function() {
      //启动高亮

      var newval = this.$route.path;
      if (newval == "/home") {
        this.imghome = require("./img/首页-橙@2x.png");
      } else {
        this.imghome = require("./img/首页-灰@2x.png");
      }
      if (newval == "/My") {
        this.imgMy = require("./img/我的-橙@2x.png");
      } else {
        this.imgMy = require("./img/我的-灰@2x.png");
      }
      if (newval == "/Sao") {
        this.imgSao = require("./img/saoma@2x.png");
      } else {
        this.imgSao = require("./img/saoma1@2x.png");
      }
    }
  },
  watch: {
    //////////////图片点击高亮效果
    "$route.path": function(newval) {
      if (newval == "/home" || newval == "/My" || newval == "/Sao") {
        document.querySelector(".foot").style.display = "block";
        document.getElementById("app").style.paddingBottom = "3rem";
        if (newval == "/Sao" || newval == "/My") {
          document.getElementById("app").style.paddingBottom = "0rem";
        } else {
          document.getElementById("app").style.paddingBottom = "3rem";
        }
      } else {
        document.querySelector(".foot").style.display = "none"; //55
        document.getElementById("app").style.paddingBottom = "0rem";
      }

      if (newval == "/home") {
        this.imghome = require("./img/首页-橙@2x.png");
      } else {
        this.imghome = require("./img/首页-灰@2x.png");
      }
      if (newval == "/My") {
        this.imgMy = require("./img/我的-橙@2x.png");
      } else {
        this.imgMy = require("./img/我的-灰@2x.png");
      }
      if (newval == "/Sao") {
        this.imgSao = require("./img/saoma@2x.png");
      } else {
        this.imgSao = require("./img/saoma1@2x.png");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
* {
  color: #333333;
}
#app {
  margin: 0 auto;
  height: 100%;
  width: 100%;

  .foot {
    position: fixed;
    height: 100px;
    width: 750px;
    bottom: 0;
    border-top: 1px solid #e0e0e0;
    .footFixed {
      display: flex;
      height: 100%;
      background: #ffffff;
      div {
        width: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        img {
          width: 48px;
          height: 48px;
        }
        div {
          margin-top: 10px;
          font-family: PingFangSC-Regular;
          font-size: 30px;
          color: #999999;
          letter-spacing: 0;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
span {
  display: inline-block;
}
</style>
